<template>
  <BaseEdge 
    :id="id" 
    :style="edgeStyle" 
    :path="path" 
    :marker-end="markerEnd"
    :label="label"
  />
</template>

<script setup>
import { BaseEdge, getBezierPath, EdgeLabelRenderer } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps({
  id: String,
  sourceX: Number,
  sourceY: Number,
  targetX: Number,
  targetY: Number,
  sourcePosition: String,
  targetPosition: String,
  data: Object,
  style: Object,
  selected: Boolean,
  label: String,
  labelStyle: Object,
  labelShowBg: {
    type: Boolean,
    default: true
  },
  labelBgStyle: Object,
  labelBgPadding: {
    type: [Number, Array],
    default: [8, 4]
  },
  labelBgBorderRadius: {
    type: Number,
    default: 2
  }
})

// 计算贝塞尔路径
const path = computed(() => {
  const [edgePath] = getBezierPath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    sourcePosition: props.sourcePosition,
    targetX: props.targetX,
    targetY: props.targetY,
    targetPosition: props.targetPosition,
  })
  return edgePath
})

// 边的样式
const edgeStyle = computed(() => ({
  strokeDasharray: '.1,3', // 点线样式
  strokeWidth: 1,
  stroke: props.selected ? '#3b82f6' : '#000000',
  strokeLinecap: 'round',
  ...props.style
}))

// 箭头标记
const markerEnd = computed(() => {
  return props.selected ? 'url(#selected-arrow)' : 'url(#arrow)'
})
</script>
